import React from 'react';
import ReactDOM from 'react-dom';
import {
  AppContainer
} from 'react-hot-loader'; // eslint-disable-line
import {
  createStore,
  applyMiddleware,
  compose
} from 'redux';
import thunk from 'redux-thunk';
// Provider组件在最外层，传入store即可，只用一次
// Connect 负责重外部获取组件需要的参数
import {
  Provider
} from 'react-redux';
// react路由组件 BrowserRouter只用一次 Route要显示的组件  Link跳转到那个路由
// Switch 值命中一个路由 Redirect重定向 , Route, Link, Switch, Redirect
import {
  BrowserRouter
} from 'react-router-dom'
import './index.css';
import App from './pages/app'
import registerServiceWorker from './registerServiceWorker';

import reducers from './reducers'

const store = createStore(reducers, compose(
  applyMiddleware(thunk),
  window.devToolsExtension ? window.devToolsExtension() : f => f
))

const render = (Component) => {
  ReactDOM.hydrate(
    (
      <AppContainer>
        <Provider store={store}>
          <BrowserRouter>
            <Component />
          </BrowserRouter>
        </Provider>
      </AppContainer>
    ),
    document.getElementById('root')
  );
}
render(App)

if (module.hot) {
  module.hot.accept('./pages/app', () => {
    const NextApp = require('./pages/app').default // eslint-disable-line
    render(NextApp)
  })
}

registerServiceWorker();
